<!--
 * @Author: C.
 * @Date: 2021-09-03 15:56:28
 * @LastEditTime: 2021-09-06 15:18:27
 * @Description: file content
-->
<template>
  <div
    class="print-table-block"
    v-for="tableItem in block.filter((blockItem) => blockItem.show)"
    :key="tableItem.id"
  >
    <!-- <div class="table-title">{{ tableItem.title.label }}</div> -->
    <div style="padding: 10px 0" v-if="tableItem.title.show"
      ><TableDiv :cdata="tableItem.title" :blockName="blockName"
    /></div>
    <table>
      <thead>
        <!-- 表头 -->
        <th v-for="item in getShowItem(tableItem)" :key="item[0].id" style="position: relative">
          <div><DragField :cdata="item[0]" :blockName="blockName" :static="true" /></div>
        </th>
      </thead>
      <tbody>
        <tr>
          <!-- 表头 -->
          <td v-for="item in getShowItem(tableItem)" :key="item[1].id" style="position: relative">
            <!-- [{{ item[0].label }}] -->
            <!-- <div><DragField :cdata="item[1]" :blockName="blockName" :static="true" /></div> -->
            <TableDiv :cdata="item[1]" :blockName="blockName" />
          </td>
        </tr>
      </tbody>
      <!-- <tfoot v-if="tableItem.showSum">
        <th
          v-for="headTitle in tableItem.fields.filter((item) => item[0].show)"
          :key="headTitle[0].prop"
          class="sum-tfoot"
        >
        </th>
      </tfoot> -->
    </table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { usePrintStore } from '/@/store/modules/print';
  import DragField from '../PrintBlock/cpn/DragField.vue';
  import TableDiv from './cpn/TableDiv.vue';
  export default defineComponent({
    components: { DragField, TableDiv },
    setup() {
      const blockName = 'table';
      let printStore = usePrintStore();
      let block = computed({
        get: () => printStore.printTemplate['table'],
        set: (x) => {
          console.log(x);
        },
      });
      let getShowItem = computed(() => {
        return (tableItem) => {
          console.log(tableItem.fields[0], 7777);

          return tableItem.fields.filter((item) => item[0].show);
        };
      });
      return {
        block,
        blockName,
        getShowItem,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import '../../../../styles/print-table.less';
</style>
